<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="关键字">
              <a-input v-model="queryParam.keywords" placeholder="用户名/手机"/>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="6" :sm="24">
              <a-form-item label="调用次数">
                <a-input-number v-model="queryParam.callNo" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="更新日期">
                <a-date-picker v-model="queryParam.date" style="width: 100%" placeholder="请输入更新日期"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="使用状态">
                <a-select v-model="queryParam.useStatus" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="使用状态">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px" v-if="false">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">

    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="{ show: true, clear: () => { this.selectedRowKeys = [] } }"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="name" slot-scope="name,record">  {{record.name}}
      </span>
      <span slot="action" slot-scope="text, record">
        <template >
          <!--<a @click="handleEdit(record)" v-if="$auth('user.edit')">编辑</a>-->
          <!--<a-divider type="vertical" />-->
        </template>
      </span>
    </s-table>

    <a-modal
      title="操作"
      :width="800"
      v-model="visible"
      @ok="handleOk"
    >
      <a-spin :spinning="saveLoading">
      <a-form :form="form">
        <a-form-item
           v-show="false"  
        >
          <a-input  style="width: 100%" v-decorator="[
          'id',
          {rules: [ ]}
        ]" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="用户名"
          hasFeedback
        >
          <a-input v-decorator="[
          'name',
          {rules: [{ required: true, message: '请输入用户名' }]}
        ]"
         placeholder="请输入用户名"/>
        </a-form-item>
        <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="手机号"
                hasFeedback
        >
          <a-input v-decorator="[
          'phone',
          {rules: [{ required: true, message: '请输入手机号' }]}
        ]"
                   placeholder="请输入手机号" />
        </a-form-item>


      </a-form>
        </a-spin>
      <template slot="footer">
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-button key="forward" :loading="saveLoading" type="primary" @click="handleOk">保存</a-button>
      </template>
    </a-modal>

  </a-card>
</template>

<script>
  import STable from '@/components/table/'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  import AInput from 'ant-design-vue/es/input/Input'
  import moment from 'moment'

  import { getTeacherList ,getUserDetail,editUser,getUserGroupList,setPassword } from '@/api/user'

  export default {
    name: 'UserList',
    components: {
      AInput,
      ATextarea,
      STable
    },
    data () {
      return {
        saveLoading:false,
        visible: false,
//        description: '全校班级管理。',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        form: this.$form.createForm(this),
        mdl: {},

        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {
        },
        groupOptions:[],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: 'id',
            sorter: true
          },
          {
            title: '姓名',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' },
          },
          {
            title: '学号',
            dataIndex: 'code'
          },
          {
            title: '注册时间',
            dataIndex: 'create_time',
            customRender: (text) =>  {
              return moment(text*1000).format('YYYY-MM-DD HH:mm:ss');
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' },
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData');
          console.log(this.queryParam);
          this.queryParam.user_group_ids = [];
          if(parameter.user_group_name && parameter.user_group_name.length){
            this.queryParam.user_group_ids =  parameter.user_group_name;
          }
          this.queryParam = Object.assign(this.queryParam,parameter);
          return getTeacherList(this.queryParam)
            .then(res => {
              console.log('res');
              return res.data
            })
        },

        selectedRowKeys: [],
        selectedRows: [],
      }
    },
    created () {
//      getRoleList({ t: new Date()})
    },
    mounted(){
    let self = this;
      getUserGroupList().then(res => {
        self.groupOptions = [];
        console.log(res.data);
        res.data.map(function (item,index) {
          self.groupOptions.push({
            text : item.name,
            value : item.id+'',
          })
        });
      })
    },
    methods: {
      handleCancel(){
        this.visible = false
      },
     // 增
    handleAdd() {
      this.visible = true
      this.form.resetFields()
    },
    // 改
    handleEdit(record) {
      let self = this
      getUserDetail({ id: record.id }).then(res => {
        self.form.setFieldsValue({ ...res.data })

      })
      // console.log(this.mdl)
      this.visible = true
    },
    // 增改 处理
    handleOk(e) {
      let self = this
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          self.saveLoading = true;
          if (values.id) {
            editUser(values).then(res => {
              self.$message.success('修改成功')
              self.$refs.table.refresh(true)
              self.visible = false
              self.saveLoading = false;
            }).catch(err =>{
              self.saveLoading = false;
              self.$message.error(err.data.msg)
            })
          }
        }
      })
    },
        // 查
    onSearch() {
      let self = this;
      self.$refs.table.refresh(true)
    },
     // 删
      resetPassword(record) {
        let self = this
        setPassword({ id: record.id ,password:123456}).then(res => {
          self.$message.success('重置成功')
      })
    },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },

      resetSearchForm () {
        this.queryParam = {
          date: moment(new Date())
        }
      }
    },
    watch: {
      /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
    }
  }
</script>